<template>
  <div id="longin">
    <van-nav-bar title="注册" />
    <van-form class="WithLongin" @submit="onSubmit">
      <van-field
        v-model="username"
        name="username"
        left-icon="phone-o"
        placeholder="请输入手机号"
        :rules="UserRules.username"
      />
      <van-field
        v-model="vercode"
        name="vercode"
        left-icon="other-pay"
        center
        placeholder="请输入短信验证码"
        :rules="UserRules.vercode"
      >
        <template #button>
          <van-button
            size="small"
            type="info"
            @click="getVercode"
            :disabled="btnDisabled"
            >{{ code_start }}</van-button
          >
        </template>
      </van-field>
      <van-field
        v-model="password"
        name="password"
        left-icon="jiesuo"
        center
        type="password"
        placeholder="请输入密码"
        :rules="UserRules.password"
      >
        <van-icon
          class="iconfont"
          class-prefix="icon"
          slot="left-icon"
          name="jiesuo"
        />
      </van-field>
      <div class="longinButton">
        <van-button
          class="longinB"
          :disabled="zhuceBtn"
          type="info"
          native-type="submit"
          block
          >注册</van-button
        >
      </div>
    </van-form>
    <div class="zhuce">
      <router-link style="color: blue; font-size: 13px" route to="/TheLongin"
        >已有账号？请登录</router-link
      >
    </div>
  </div>
</template>
<script>
import { getLongin, getverCode } from "@/api/user";

export default {
  data() {
    return {
      password: "",
      username: "",
      vercode: "",
      btnDisabled: false,
      zhuceBtn: false,
      code_start: "发送验证码",
      UserRules: {
        username: [
          { required: true, message: "请填写手机号" },
          {
            pattern:
              /^(0|86|17951)?(13[0-9]|15[0123456789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
            message: "请输入正确手机号",
          },
        ],
        password: [
          { required: true, message: "请填写密码" },
          {
            pattern: /^\w{6,12}$/,
            message: "密码格式错误",
          },
        ],
        vercode: [{ required: true, message: "请填写验证码" }],
      },
    };
  },
  methods: {
    // 发送短信
    getVercode() {
      this.btnDisabled = true; //让发送短信按钮不可点击
      this.code_start = "已发送";
      let timer = null;
      let count = 120;
      getverCode({ mobile: this.username, type: "register" })
        .then((reg) => {
          console.log(reg);
          if (reg.code == 0) {
            this.$toast("验证码已发送,请注意查收");
            timer = setInterval((e) => {
              count--;
              this.code_start = `${count}s后再次发送`;
              if (count <= 0) {
                clearInterval(timer);
                count = 120;
                this.code_start = "再次发送";
                this.btnDisabled = false;
              }
            }, 1000);
          } else if (reg.code == 1) {
            this.$toast("该账号已注册");
            this.btnDisabled = false; //让发送短信按钮不可点击
            this.code_start = "发送验证码";
          }
        })
        .catch((err) => {
          this.$toast(res.msg || "网络开了个小差,请重新发送一下");
          this.btnDisabled = false; //让发送短信按钮不可点击
          this.code_start = "发送验证码";
        });
    },
    //注册
    onSubmit(valuse) {
      this.zhuceBtn = true;
      // console.log("submit", valuse);
      getLongin(valuse).then((res) => {
        // console.log(res);
        if (res.code == 0) {
          this.$toast("注册成功,即将返回登陆页面");
          this.zhuceBtn = false;
          setTimeout((v) => {
            this.$router.replace("/TheLongin");
          }, 800);
        } else {
          this.$toast(res.msg || "注册失败");
          this.zhuceBtn = false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
#longin {
  height: 177.8vw;
  background-color: #f7f8fa;
}

::v-deep .van-button--info {
  color: #6b6766;
  background-color: #ededed;
  border: #fff;
  border-radius: 10px;
}
.van-button--small {
  height: 25px;
}
::v-deep .longinB {
  margin-top: 30px;
  margin-left: 20px;
  width: 330px;
  background-color: #8b69a9;
  color: #fff;
  border-radius: 1px;
}
::v-deep .zhuce {
  margin-top: 10px;
  text-align: center;
}
</style>